<template>
  <div class="stutestList">
    <div class="top">
      <span class="title">考试列表</span>
      <div class="from">
        <span>关键字:</span>
        <div class="input">
          <el-input v-model="params.key" placeholder="考试名称" clearable />
        </div>
        <span>状态:</span>
        <div class="state">
          <el-select @change="changeSelect" v-model="params.result">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <el-button type="primary" @click="inquire">查询</el-button>
      </div>
    </div>
    <el-empty description="暂无数据" v-show="list.length===0" />
    <div class="content">
      <!-- 列表 -->
      <div class="list" v-loading="loading">
        <div class="li" v-for="item in list" :key="item.id" @click="next(item.id,item.result)">
          <div class="liTop">
            <img
              v-show="item.result === '未通过'"
              src="../../static/img/didNotPass.jpg"
              alt=""
            />
            <img
              v-show="item.result === '未考试'"
              src="../../static/img/notInvolved.jpg"
              alt=""
            />
            <img
              v-show="item.result === '待阅卷'"
              src="../../static/img/wait.jpg"
              alt=""
            />
            <img
              v-show="item.result === '已通过'"
              src="../../static/img/yes.jpg"
              alt=""
            />
            <div class="title">
              <span>{{ item.title }}</span>
            </div>
          </div>
          <div class="time">
            <span
              >考试时间:
              {{
                !item.begintime ? "不限" : item.begintime.substr(0, 16) + "至" + item.endtime.substr(0, 16)
              }}</span
            >
            <span>{{ item.studentcounts }}人通过</span>
          </div>
        </div>
      </div>
      <div class="pagination">
        <!-- 分页 -->
        <div class="demo-pagination-block">
          <el-pagination
            v-model:currentPage="params.page"
            v-model:page-size="params.psize"
            :page-sizes="[12, 36, 60, 120]"
            :small="small"
            :disabled="disabled"
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="counts"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, toRefs, ref, onMounted } from "vue";
import { getStudentList } from "../../apis/stutest/stutest";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
// 跳转
const router=useRouter()
const data:any = reactive({
  small: false,
  background: false,
  disabled: false,
  //   加载
  loading: false,
  // 接口请求的数据
  params: {
    page: 1,
    psize: 12,
    key: "",
    result: "",
  },
  //   列表数据
  list: [],
  //   共多少条数据
  counts: 0,
});
const { params, list, counts, small, background, disabled, loading } =
  toRefs(data);
// 调用列表数据
const studentList = async () => {
  data.loading = true;
  const res: any = await getStudentList(params.value);
  if (res.errCode === 10000) {
    data.list = res.data.list;
    data.counts = res.data.counts;
    data.loading = false;
  } else {
    ElMessage.error(res.errMsg);
    data.loading = false;
  }
};
// 点击跳转
const next=(id:number,result:string)=>{
    if(result==='未考试'){
        router.push({name:'examprepare',query:{id}})
    }else{
        router.push({name:'examresults',query:{id}})
    }
    
    
}
onMounted(() => {
  studentList();
});
// 状态选项
const options = [
  {
    value: "",
    label: "所有",
  },
  {
    value: "未考试",
    label: "未考试",
  },
  {
    value: "待阅卷",
    label: "待阅卷",
  },
  {
    value: "已通过",
    label: "已通过",
  },
  {
    value: "未通过",
    label: "未通过",
  },
];
// 选择器内容改变
const changeSelect = (e: any) => {
  studentList()
};
// 点击查询
const inquire=()=>{
  studentList()
}
// 每页多少条内容改变
const handleSizeChange = (val: number) => {
  params.value.page = 1;
  params.value.psize = val;
  studentList();
};
// 页码内容改变
const handleCurrentChange = (val: number) => {
  params.value.page = val;
  studentList();
};
</script>

<style lang="less" scoped>
@import url("../../static/css/stutest/stutestList.css");
</style>
